<template>
<div>
  <el-form :model="addGoodsInfoForm" ref="addGoodsInfoForm" label-position='top' :rules='addFromRules'>
  <el-form-item
    label="商品名称"
    prop="goods_name"
  >
    <el-input type="text" v-model="addGoodsInfoForm.goods_name" autosize></el-input>
  </el-form-item>
   <el-form-item
    label="商品价格"
    prop="goods_price"
  >
    <el-input type="text" v-model="addGoodsInfoForm.goods_price"></el-input>
  </el-form-item>
   <el-form-item
    label="商品数量"
    prop="goods_number"
  >
    <el-input type="text" v-model="addGoodsInfoForm.goods_number"></el-input>
  </el-form-item>
   <el-form-item
    label="商品重量"
    prop="goods_weight"
  >
    <el-input type="text" v-model="addGoodsInfoForm.goods_weight"></el-input>
  </el-form-item>
     <el-alert
      :closable="false"
    title="分类必须选择三级分类且为必选项"
    type="info"
    show-icon
    center>
  </el-alert>
  <el-form-item label="商品分类" prop='goods_cat'>
      <br>
   
                   <el-cascader
    v-model="addGoodsInfoForm.goods_cat"
    :options="categoryList"
    :props="options"
    clearable
    @change='hanldCategoryId'
    ></el-cascader>
  </el-form-item>
</el-form>
</div>
   
</template>

<script>
import {getGoodsCate} from 'network/axios'
export default {
        name:'GoodsinfoForm',
         created(){
                getGoodsCate().then(res=>{
                       if(res.data.meta.status!=200){
                               this.$message.error('获取商品列表数据失败')
                       }else{
                               this.categoryList=res.data.data
                       }
                })
        },
        data(){
            return {
                        //添加商品表单
                      addGoodsInfoForm:{
                      goods_name:'',
                      goods_cat:[],
                      goods_price:'',
                      goods_number:'',
                      goods_weight:'',
                    },
                     options:{
                        expandTrigger:'hover',
                        label:'cat_name',
                        value:'cat_id',
                        children:'children',
        
                },
                handleAddGoodsInfoForm:{

                },
                     // 动态或者静态参数列表
                categoryList:[],
                //选中的各级菜单ids,是一个数组
                categoryIds:[],
                //基本信息表单规则
                  addFromRules:{
                        goods_name:[
                          {required:true,message:'商品名不能为空',trigger:'blur'}
                        ],                 
                      goods_price:[
                        {required:true,message:'商品价格不能为空',trigger:'blur'}
                      ],
                      goods_number:[
                        {required:true,message:'商品数量不能为空',trigger:'blur'}
                      ],
                      goods_weight:[
                        {required:true,message:'商品重量不能为空',trigger:'blur'}
                      ],
                        goods_cat:[
                                {required:true,trigger:'blur'}
                        ]
                  }
            }
        },
        methods:{
            hanldCategoryId(){
              this.$bus.$emit('sendCategoryId',this.addGoodsInfoForm.goods_cat[2])
              this.handleAddGoodsInfoForm=this._.cloneDeep(this.addGoodsInfoForm)
              this.handleAddGoodsInfoForm.goods_cat=this.handleAddGoodsInfoForm.goods_cat.join(',')
              console.log(this.handleAddGoodsInfoForm.goods_cat);
            }
        }
}
</script>

<style>

</style>